<!-- 更换账号 -->
<template>
	<view class="index pd-lr36">
		<view class="mt10">
			<text class="title">更换的登录手机号</text>
		</view>
		<view >
			<view class="inputs">
					<input 
					class="input-text" 
					type="number" 
					v-model="values" 
					maxlength="11"
					placeholder-class='placeholder-class' 
					placeholder='请输入您的手机号'
					:adjust-position='false'	 />
					<view @click="handleCodes" class="code">{{time || '发送验证码'}} </view>
			
			</view>
			<view class="mt10 inputs">
				<input
				class="input-text" 
				type="number" 
				v-model="code" 
				maxlength="6"
				placeholder-class='placeholder-class' 
				placeholder='请填写验证码'
				:adjust-position='false'	 />
			</view>
			<view class="bind ac" @click="handlePutPhone" :class="{'active':values && code}">
				 <text>更换</text> 
			</view>
		</view>
		
	</view>
</template>

<script>
	import {apiPostLoginIndex,apiPostLoginCode} from "@/api/me.js"
	import {logins,newData} from "@/utils/common.js"
	export default {
		components: {},
		data() {
			return {
				values:'',
				code:'',
				time:0,
			}
		},
		watch:{
			time(val){
				if(val == 60){
					let times = setInterval(()=>{
						this.time--
						if(!this.time){
							clearInterval(times)
						}
					},1000)
				}
			}
		},
		methods: {
			handleCodes(){
				if(!this.values){
					uni.showToast({
						title:'请输入手机号码',
						icon:'none'
					}) 
					return false; 
				}
				if(!(/^1[3456789]\d{9}$/.test(this.values))){ 
				        uni.showToast({
				        	title:'手机号码错误',
							icon:'none'
				        }) 
				        return false; 
				} 
				if(!this.time){
					apiPostLoginCode({mobile:this.values}).then(res=>{
						console.log(res,788)
						this.time = 60
					}).catch((e)=>{
						this.time = 0
					})
				}
				
			},
			handlePutPhone(){
				if(this.values && this.code){
					apiPostLoginIndex({mobile:this.values,code:this.code}).then(()=>{
						uni.clearStorageSync()
						logins(newData)
					})
				}
			}

		},
	}
</script>

<style scoped lang="scss">

.index{
	font-size: 24upx;
	height: 100%;
	color:#747384;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
}
.placeholder-class{
	font-size: 28upx;
}
.texts{
	padding: 26upx 0;
	color: #DDDBFB;
	border-bottom: 1px solid #1C1B2B;
}
.inputs{
	margin-top: 40upx;
	padding: 36upx 0;
	height: 120upx;
	line-height: 80upx;
	box-sizing: border-box;
	border-bottom:1px solid #1C1B2B;
	position: relative;
}
.input-text{
	height: 28upx;
	width: 80%;
	line-height: 28upx;
	color: #fff;
}
.bind{
	width:100%;
	height:48*2upx;
	line-height:48*2upx;
	margin-top: 60upx;
	background:rgba(28,27,43,1);
	border-radius:4*2upx;
	font-size: 28upx;
}
.active{
	background: #E62D54;
	color: #fff;
}
.code{
	position: absolute;
	right: 0;
	font-size: 24upx;
	top: 26upx;
	color: #E62D54;
	text-align: center;
	width:20%;
	height:30*2upx;
	line-height:30*2upx;
	border-radius:8upx;
	border:1px solid rgba(230,45,84,1);
}
.tu{
	width: 160upx;
	height: 60upx;
	position: absolute;
	right: 0;
	top: 26upx;
}
.mt10{
	margin-top: 20upx;
}
</style>
